import React, { useEffect, useState } from 'react'
import { useDispatch, useSelector } from 'react-redux'

import { RouteComponentProps } from 'react-router-dom'

import { placeAnOrder } from '@/modules/order'
import Reducers from '@/modules'

import './styles.less'

type IStore = ReturnType<typeof Reducers>

type Props = {}

function Car({ history }: Props & RouteComponentProps) {
  const [goodsList, setGoodsList] = useState<any[]>([])

  const dispatch = useDispatch()
  const store = useSelector(({ orderInfo }: IStore) => orderInfo)

  useEffect(() => {
    setGoodsList(() => {
      return [
        {
          id: 1,
          count: 2,
        },
        {
          id: 2,
          count: 1,
        },
      ]
    })
  }, [])

  function settleAccounts() {
    // 结算需要提交的商品信息：价格与金额这些，一般都是后台自己去算，算完后重新将信息返回，这个时候的前台页面就不能再修改商品和商品数量了，只能是纯展示，如果要修改只能退回购物车。
    // goodsId: 商品id
    // count: 商品数量
    // 为了避免进入购物车后需要等待太长时间，我们需要在去结算时获取后台计算结果，这样在切换到结算页面时就可以立即展示内容
    dispatch(placeAnOrder(goodsList))
  }

  useEffect(() => {
    // 监听到数据变化后，生成并跳转到订单页
    if (store.id) {
      history.push({
        pathname: `/order/detail/${store.id}`,
        state: store,
      })
    }
  }, [store])

  return (
    <div className="docwrap car">
      <div className="goods-list">购物车商品信息什么的一堆</div>
      <div className="confirm">
        <button onClick={settleAccounts}>去结算</button>
      </div>
    </div>
  )
}

export default Car
